<template>
  <div class="template-root-div">
    <div class="main">
      <mine-title>菜单管理</mine-title>
      <div class="content">
        <el-row class="header">
          <mine-button type="primary" @click="handleDialogValue()"
            ><i class="iconfont icon-add-line"></i>新增菜单</mine-button
          >
          <!-- v-if="hasAuth('system:user:add')" -->
        </el-row>

        <el-table
          :data="tableData"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          stripe
          default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="name" label="菜单名称" width="180" />
          <!-- <el-table-column prop="icon" label="图标" width="70" align="center">
                  <template v-slot="scope">
                    <el-icon><svg-icon :icon="scope.row.icon" /></el-icon>
                  </template>
                </el-table-column> -->
          <el-table-column
            prop="orderNum"
            label="排序"
            width="70"
            align="center"
          />
          <el-table-column prop="perms" label="权限标识" width="200" />
          <el-table-column prop="path" label="组件路径" width="180" />
          <el-table-column
            prop="menuType"
            label="菜单类型"
            width="120"
            align="center"
          >
            <template v-slot="scope">
              <el-tag
                size="small"
                v-if="scope.row.menuType === 'M'"
                type="danger"
                effect="dark"
                >目录</el-tag
              >
              <el-tag
                size="small"
                v-else-if="scope.row.menuType === 'C'"
                type="success"
                effect="dark"
                >菜单</el-tag
              >
              <el-tag
                size="small"
                v-else-if="scope.row.menuType === 'F'"
                type="warning"
                effect="dark"
                >按钮</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center" />
          <el-table-column
            prop="action"
            label="操作"
            width="200"
            align="center"
          >
            <template v-slot="scope">
              <mine-button type="text" @click="handleDialogValue(scope.row.id)"
                >编辑</mine-button
              >
              <el-popconfirm
                style="margin-left: 10px"
                title="您确定要删除这条记录吗？"
                @confirm="handleDelete(scope.row.id)"
              >
                <template #reference>
                  <mine-button type="text">删除</mine-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 新增编辑弹框 -->
        <Dialog
          :tableData="tableData"
          :dialogVisible="dialogVisible"
          :id="id"
          :dialogTitle="dialogTitle"
          @initMenuList="initMenuList"
          @closeDialog="closeDialog"
        ></Dialog>
      </div>
    </div>
  </div>
</template>

<script >
import Dialog from "./components/dialog";

export default {
  components: {
    Dialog,
  },
  data() {
    return {
      tableData: [],
      id: -1,
      dialogVisible: false,
      dialogTitle: "",
    };
  },
  methods: {
    closeDialog() {
      this.dialogVisible = false;
      this.initMenuList();
    },
    handleDialogValue(menuId) {
      if (menuId) {
        this.id = menuId;
        this.dialogTitle = "菜单修改";
      } else {
        this.id = -1;
        this.dialogTitle = "菜单添加";
      }
      this.dialogVisible = true;
    },
    async initMenuList() {
      const res = await this.$store.dispatch("menuAdmin/initMenuList");
      if (res.data.code === 200) {
        this.tableData = res.data.treeMenu;
      } else {
        this.$message.warning("列表数据获取失败！");
      }
    },
    async handleDelete(id) {
      const res = await this.$store.dispatch("menuAdmin/deleteMenuList", id);
      if (res.data.code == 200) {
        this.$message.success("删除成功!");
        this.initMenuList();
      } else {
        this.$message.warning("删除失败!");
      }
    },
  },
  created() {
    this.initMenuList();
  },
};
</script>

<style lang="less" scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}

.el-pagination {
  float: right;
  padding: 20px;
  box-sizing: border-box;
}

/deep/ th.el-table__cell {
  word-break: break-word;
  background-color: #f8f8f9 !important;
  color: #515a6e;
  height: 40px;
  font-size: 13px;
}

.el-tag--small {
  margin-left: 5px;
}
</style>
